<!-- 更换头像内容文件 -->
<template>
  <div class="replaceHead" v-loading="loading" :element-loading-text="text">
    <!-- 标题 -->
    <div class="title">
      <h3>更换头像</h3>
    </div>
    <div class="box">
      <div v-if="imgUrl" class="imgBox">
        <img :src="imgUrl.url" alt="" width="100%" height="100%">
      </div>
      <div v-else class="imgBox">
        <span>请选择头像</span>
      </div>
      <div class="uploadBox">
        <el-upload class="upload-demo" action="#" list-type="picture" :on-change="fn" :auto-upload="false"
          :show-file-list="false">
          <el-button size="small" type="primary" class="btn" style=""><i slot="default"
              class="el-icon-plus"><span>选择头像</span></i></el-button>
        </el-upload>
        <el-button size="small" type="primary" class="btnTwo" @click="upload"><i
            class="el-icon-upload2"></i><span>上传图片</span></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { UpdateAvatar } from '@/api/user'
import store from '@/store'
export default {
  name: 'replaceHead',
  created () {
    store.commit('user/NewSetToken', localStorage.getItem('token'))
    this.loading = true
    this.$emit('setIndexisSHow', true)
  },
  mounted () {
    this.loading = false
  },
  data () {
    return {
      loading: '',
      text: '拼命加载中...',
      imgUrl: '',
      avatar: ''
    }
  },
  methods: {
    fn (file) {
      this.imgUrl = file
      this.avatar = file.raw
      // 去除uid后才能正常转换base64
      delete this.avatar.uid
    },
    async upload () {
      if (this.imgUrl === '' && this.avatar === '') {
        this.$message.error('请选择需要上传的头像上传！')
        return
      }
      this.text = '数据正在提交，请稍后...'
      this.loading = true
      // 将文件转为 base64字符串
      const reader = new FileReader()
      reader.onload = async e => {
        // 打印base64字符串  异步操作
        // console.log(e.target.result)
        const res = await UpdateAvatar(e.target.result)
        console.log(res)
        this.$message.success(res.data.message)
        this.imgUrl = ''
        this.avatar = ''
        // 更新本地存储数据以及store数据和index中显示的数据
        // 更新本地存储数据
        const localData = JSON.parse(localStorage.getItem('userInfo'))
        localData.user_pic = e.target.result
        localStorage.setItem('userInfo', JSON.stringify(localData))
        // 更新sotre仓库数据
        store.commit('user/setUserInfo', localData)
        // 更新index显示数据
        this.$emit('setUserInfo', localData)
        this.loading = false
      }
      reader.readAsDataURL(this.avatar)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  padding: 30px;
  height: 338px;
  background: #FFFFFF;
  border-radius: 0px 0px 4px 4px;

  .imgBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 226px;
    height: 226px;
    background: #F5F6FA;
    border-radius: 0px 0px 2px 2px;
    cursor: pointer;

    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.40);
      text-align: center;
      font-weight: 400;
    }
  }

  .uploadBox {
    display: flex;
    margin-top: 20px;
  }
}

img[src=""],
img:not([src]) {
  opacity: 0;
  border: none;
  visibility: hidden;
  max-width: none;
}

.btn,
.btnTwo {
  width: 108px;
  height: 32px;
  background: #4F81FF;
  border-radius: 3px;
  border: none;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.90);
  border-radius: 0px 0px 2px 2px;

  span {
    margin-left: 5px;
  }
}

.btnTwo {
  margin-left: 10px;
  color: #0052D9;
  background: #EAECF5;
  border-radius: 3px;
}

.btnTwo:hover {
  color: #0052D9;
  background-color: #f5f6fa;
}

/deep/ .el-upload-list__item-name {
  opacity: 0;
}
</style>
